<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>rem布局</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      /* html {
        font-size: 14px;
      }
      .demo1 {
        font-size: 12px;
        width: 12rem;
        height: 12rem;
        background-color: aqua;
      }
      .demo1 p {
        /* width: 10em;
        height: 10em; */
      /* width: 10rem;
        height: 10rem;
        background-color: purple;
      } 
      */
      /* 媒体查询 */
      /* @media screen and (max-width: 539px) {
        body {
          background-color: purple;
        }
      }
      @media screen and (min-width: 540px) and (max-width: 969px) {
        body {
          background-color: rgb(206, 26, 56);
        }
      }
      @media screen and (min-width: 970px) {
        body {
          background-color: rgb(21, 160, 191);
        }
      } */

      /* @media screen and (min-width: 320px) {
        html {
          font-size: 50px;
        }
      }
      @media screen and (min-width: 640px) {
        html {
          font-size: 100px;
        }
      }
      .top {
        height: 1rem;
        font-size: 0.5rem;
        background-color: aqua;
        color: #fff;
        line-height: 1rem;
        text-align: center;
      } */
    </style>
    <!-- 引入资源  -->
    <link
      rel="stylesheet"
      href="引入资源1.css"
      media="screen and (min-width: 320px)"
    />
    <link
      rel="stylesheet"
      href="引入资源2.css"
      media="screen and (min-width: 640px)"
    />
  </head>
  <body>
    <!-- 
        流式布局 和 flex 布局 主要针对 宽度 布局
        rem 单位
            rem 是一个相对单位，类似于 em, em 是父元素字体大小
            不同的是 rem 的基准相对于 html 元素的字体大小
            比如，根元素(html)设置font-size=12px;非根元素设置为width:2rem;则转换成 px 表示就是 24px
            rem相对于 html 元素 字体大小来说的
        rem的优点就是可以通过修改 html 里面的文字大小来改变页面中元素的大小可以整体控制
        媒体查询是CSS3新语法：
          使用 @media查询，可以针对不同的媒体类型定义不同的样式
          @media可以针对不同的屏幕尺寸设置不同的样式
          当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
        语法：
          @media mediatype and | not | only(media feature){
            CSS-Code;
          }
          用 @media 开头 注意 @符号
          mediatype媒体类型  -- all 用于所有设备； print 用于打印机和打印预览； scree 用于电脑屏幕，平板电脑，智能手机等
          关键字 and not only
          media feature 媒体特性 必须有小括号包含
            width 定义输出设备中页面可见区域的宽度
            min-width 定义输出设备中页面最小可见区域的宽度
            max-width 定义输出设备中页面最大可见区域的宽度

        引入资源
        就是针对不同的屏幕尺寸 调用不同的 css 文件
        语法：
          <link rel="stylesheet" href="mystylesheet.css" media="mediatype and | not | only(media feature)" />
     -->

    <!-- <div class="demo1">
      <p></p>
    </div> -->

    <!-- <div class="top">购物车</div> -->

    <div class="demo2">1</div>
    <div class="demo2">2</div>
  </body>
</html>
